<template>
	<scroll-view class="main" scroll-y="true" :lower-threshold="50" @scrolltolower="getData" :style="{'height':Height+'px'}">
		<view class="list" v-for="(item,index) in list" >
			<view class="list-head" @click="goShop(item.site_id)">
				<view class="head-logo">
					<image :src="$util.img(item.logo)"></image>
				</view>
				<view class="head-text">{{item.site_name}}</view>
			</view>
			<view class="list-content">
				<view class="list-content-text">付款金额</view>
				<view class="list-content-num">
					&yen;{{item.num}}
				</view>
			</view>
			<view class="list-main">
				<view class="list-main-left">
					余额支付
				</view>
				<view class="list-main-right">
					{{item.balance_num}}
				</view>
			</view>
			<view class="list-main">
				<view class="list-main-left">
					消费券支付
				</view>
				<view class="list-main-right">
					{{item.consumer_num}}
				</view>
			</view>
			<view class="list-main">
				<view class="list-main-left">
					微信支付
				</view>
				<view class="list-main-right">
					{{item.money_num}}
				</view>
			</view>
			<view class="list-main">
				<view class="list-main-left">
					支付时间
				</view>
				<view class="list-main-right">
					{{item.pay_time}}
				</view>
			</view>
		</view>
		<view class="cart-empty" v-if="showEmpty">
			<image :src="$util.img('upload/uniapp/common-empty.png')" mode="aspectFit"></image>
			<view class="color-tip margin-top margin-bottom">暂无数据</view>
			
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				pageSize:10,
				showEmpty:true,
				Height:500
			}
		},
		methods: {
			onLoad(){
				var that = this;
				
				uni.getSystemInfo({
					success:function(res){
						that.Height = res.windowHeight;
					}
				})
			},
			onShow(){
				this.getData()
			},
			getData(){
				var that = this;
				that.$api.sendRequest({
					url:"/offlinepay/api/OfflinePay/offlinePayList",
					data:{
						page:that.page
					},
					success:function(res){
						
						if(that.page==1){
							if(res.count!=0){
								that.showEmpty = false;
							}
							that.list = res.list;
						}else{
							that.list.push.apply(that.list,res.list);
						}
						if(res.list.length>0){
							that.page++;
						}
					}
				})
			},
			goShop(id){
				this.$util.redirectTo('/otherpages/shop/index/index?site_id='+id)
				
			}
		}
	}
</script>

<style>
	.main{
		background-color: #f1f1f1;
		width: 94%;
		padding: 10px 3%;
	}
	.list{
		width: 94%;
		padding: 5px 3%;
		background-color: #ffffff;
		border-radius: 10px;
		margin: 10px 0;
	}
	.list-head{
		width: 100%;
		display: flex;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #eee;
	}
	.head-logo image{
		width: 30px;
		height: 30px;
		border-radius: 15px;
		margin-top: 10px;
	}
	.head-text{
		font-weight: 600;
		color: #333333;
		line-height: 50px;
		margin-left: 10px;
	}
	.list-content{
		width: 100%;
		text-align: center;
		padding: 10px 0;
	}
	.list-content-text{
		color: #666666;
		
	}
	.list-content-num{
		font-size: 20px;
		font-weight: 700;
		line-height: 50px;
	}
	.list-main{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
	}
	.list-main-left{
		color: #666666;
		flex: 1;
		line-height: 40px;
		
	}
	.list-main-right{
		color: #333333;
		font-weight: 600;
		margin-left: 10px;
		line-height: 40px;
	}
	.cart-empty {
		text-align: center;
		padding: 140rpx 80rpx;
	}
	.cart-empty image {
			width: 63%;
			height: 450rpx;
		}
</style>
